<template>
  <p style="font-size: 25px;font-weight: bold;margin-left: 700px;margin-top: 40px">提现管理</p>
  <el-button @click="add" style="margin-top: 50px;">添加</el-button>
  <div> 
      <el-table :data="tableData" >
          <el-table-column prop="name" label="真实姓名"  />
          <el-table-column prop="money" label="提现金额"  />
          <el-table-column prop="account" label="微信账号" />
          <el-table-column  label="操作" >
              <template #default="scope">
                  <el-button @click="deldata(scope.row)">删除</el-button>
                  <el-button @click="editdata(scope.row)">编辑</el-button>
              </template>
          </el-table-column>
      </el-table>
  </div>
  <el-pagination 
  v-model:currentPage="query.page"
  v-model:page-size="query.pagesize"
  :page-sizes="[1, 2, 3, 4]" 
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
/>
  <el-dialog v-model="flag" title="提现" width="500">
  <el-form :model="form">
    <el-form-item label="提现金额" :label-width="formLabelWidth">
      <el-input v-model="form.money" autocomplete="off" />
    </el-form-item>
    <el-form-item label="微信账号" :label-width="formLabelWidth">
      <el-input v-model="form.account" autocomplete="off" />
    </el-form-item>
    <el-form-item label="真实姓名" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off" />
    </el-form-item>
  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="flag = false">取消</el-button>
      <el-button type="primary" @click="savedata">
              修改
      </el-button>
      <el-button type="primary" @click="save">
        添加
      </el-button>
    </div>
  </template>
</el-dialog>
</template>


<script setup>
import { ref,onMounted } from "vue";
import axios from "axios";
let flag = ref(false);
let tableData= ref([])
let total=ref(0)
let form = ref({
  name:"",
  money:"",
  account:""

})
let query=ref({
  page:1,
  pagesize:2
})
const getmoney=()=>{
axios.get(`http://127.0.0.1:8000/user/with/?page=${query.value.page}&size=${query.value.pagesize}`)
.then((res)=>{
  console.log(res.data)
  tableData.value=res.data.results
  form.value=res.data
  total.value=res.data.count
})
}

const editdata=(info)=>{
  flag.value=true
  form.value=info
}
const savedata=()=>{
 axios.put(`http://127.0.0.1:8000/user/with/${form.value.id}/`,form.value)
 .then(res=>{
  if(res.status==200){
      ElMessage.success('编辑成功')
      flag.value=false
      form.value={
            name:"",
            money:"",
            account:""
          }  
      getmoney() 
  }
 })
}
const handleSizeChange=(num)=>{
query.value.pagesize=num
getmoney()
}
const handleCurrentChange=(num)=>{
query.value.page=num
getmoney()
}
const save= () => {
console.log(form.value)
  //执行接口
  axios.post("http://127.0.0.1:8000/user/with/",form.value)
  .then(res=>{
      console.log(res)
      if(res.status==201){
          ElMessage.success('添加成功')
          flag.value=false
          form.value={
            name:"",
            money:"",
            account:""
          }  
      getmoney() 
      }
  })
}
const add = () => {
  flag.value = true;
}
const deldata=(info)=>{
  console.log(info)
  axios.delete(`http://127.0.0.1:8000/user/with/${info.id}/`)
  .then(res=>{
      if(res.status==204){
          ElMessage.success('删除成功')
          getmoney()
      }})
}
onMounted(()=>{
getmoney()
})
</script>


<style scoped> 

</style>